<template>
  <view class="back" :style="{ right: props.right }">
    <slot></slot>
    <image
      :src="ossImg('others/component/fixed_home.png')"
      @click.stop="backHome"
    />
    <uni-badge
      class="uni-badge-left-margin"
      :text="cartCount"
      absolute="rightTop"
      size="small"
      :customStyle="{
        color: '#ffffff',
        right: '2px',
        top: '2px',
        background: '#0058C6',
      }"
    >
      <image
        :src="ossImg('others/component/buy_icon2.png')"
        @click.stop="backCart"
    /></uni-badge>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import { ossImg } from "@/utils/utils";
import UniBadge from "@/components/uni-badge/uni-badge.vue";

const props = defineProps({
  cartCount: {
    type: Number,
    default: () => getApp().globalData.cartCount,
  },
  right: {
    type: String,
    default: '64rpx'
  }
});

const backHome = () => {
  getApp().emdlz("track", "event", "homepage", "click", "homepage", "");
  uni.switchTab({
    url: "/pages/home/home",
  });
};
const backCart = () => {
  getApp().emdlz("track", "event", "homepage", "click", "cart", "");
  uni.switchTab({
    url: "/pages/cart/cart",
  });
};
</script>

<style lang="less" scoped>
.back {
  position: fixed;
  right: 32px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    width: 44px;
    height: 44px;
    display: block;
  }
}
</style>
